<template>
    <div class="log">
        <div class="logItem">
            <h3 class="title">运费设置</h3>
            <div>一单多品时，运费按
                <span class="radios">
                    <el-radio @change="updateShopLog(index)"  v-for="(item,index) in shopLogTemStatus" v-model="logTemStatus"  :label="item.index" :key="item.index">
                        {{item.name}}
                    </el-radio>
                </span>
                <div class="logInfo">举例说明:订单中有A、B、C共三个商品,A设的运费首件15元,B和C设的是同一个运费模板,首重1kg收10元。假如B和C加起来的重量不到1kg，那么B和C单独算运费是10元。</div>
                <div class="log">
                    <div>如果设置按最低计算，订单的运费按照10元来计算;</div>
                    <div>如果设置按最高计算，订单的运费按照15元来计算;</div>
                    <div>如果设置按累计计算，订单的运费按照25元来计算;</div>
                </div>
            </div>
            <div class="addIcon">
                <el-button @click="turn(true)"  size="mini" type="primary" round>新增运费模板</el-button>
            </div>
            <div class="table" v-for="(item,index) in list" :key="item.id" >
                <div class="tableTitle">
                    <div class="templateInfo">
                        <span style="font-weight: bolder">模板名称:{{item.name}}</span>
                        <el-button @click="del(index)" class="editIcon" size="mini" type="danger" icon="el-icon-delete" circle></el-button>
                        <el-button @click="turn(false,item.id)" size="mini" type="primary" class="editIcon" icon="el-icon-edit" circle></el-button>
                    </div>
                </div>
                <el-table
                        :data="item.shopLogRuleEntityList"
                        style="width: 100%"
                        border
                >
                    <el-table-column
                            prop="province"
                            label="目的地区"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="fw"
                            label="首运重量(kg)">
                    </el-table-column>
                    <el-table-column
                            prop="fp"
                            label="首重价格(元)">
                    </el-table-column>
                    <el-table-column
                            prop="up"
                            label="续重价格(元)">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
    import {getList,remove,savaOrUpdate} from '@/api/shopLogTem'
    export default {
        data(){
            return{
                logTemStatus:0,
                list:[],
                shopLogTemStatus:[
                    {
                    name:'最低计算',
                     index:0
                     },
                    {
                        name:'最高计算',
                        index:1
                    },
                    {
                        name:'累计计算',
                        index:2
                    }],
                shopLogTem:{
                  id:null,
                  shopId:null,
                  name:null,
                  status:null
                },
                tableData: []
            }
        },

        created() {
            this.getList()
        },
        methods: {
            turn(flag, id) {
                this.$router.push({
                    path: '/bus/addLogFee', query: {
                        shopLogStatus: this.logTemStatus,shopLogTemId: id
                    }
                })
            },
            getList() {
                getList().then(res => {
                    this.list = res.data
                    this.logTemStatus = res.extra.status
                    if (this.logTemStatus == null) {
                        this.logTemStatus = 0
                    }
                })
            },
            del(index) {
                this.$confirm('是否确认删除模板？')
                    .then(_ => {
                        const ids = [this.list[index].id]
                        remove({ids: ids}).then(res => {
                            this.list.splice(index, 1)
                            this.$notify({
                                title: '成功',
                                message: '删除成功',
                                type: 'success',
                                duration: 2000
                            })
                        })
                    })
                    .catch(_ => {})
            },
            updateShopLog(index){
                savaOrUpdate(index).then(res => {
                    this.$notify({
                        title: '成功',
                        message: '修改成功',
                        type: 'success',
                        duration: 2000
                    })
                })
            }
        }
    }
</script>

<style scoped>
    .log{
        color: gray;
    }
    .logItem{
        margin-left: 30px;
    }
    .title{
        border-left: 4px solid gray;
    }
    .radios{
        margin-left: 10px;
    }
    .logInfo{
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .addIcon{
        margin-top: 30px;
        margin-bottom: 20px;
    }
    .tableTitle{
        border-left: 1px solid rgba(128, 128, 128, 0.3);
        border-top: 1px solid rgba(128, 128, 128, 0.3);
        border-right: 1px solid rgba(128, 128, 128, 0.3);
        height: 40px;
    }
    .templateInfo{
        margin-top: 10px;
        text-align: center;
    }
    .editIcon{
        float: right;
        margin-right: 10px;
    }
    .table{
        margin-bottom: 10px;
    }

</style>
